'use strict';
import React from 'react';
import {
    View,
    Text,
    Image,
    ScrollView,
    StyleSheet,
    Animated,
    TouchableOpacity,

} from 'react-native';
import ToolBar from '../Components/ToolBar';
import Toast from '../Utils/toast';
import FoundDetailsListView from '../Components/FoundDetailsListView';
import BottomInputText from '../Components/BottomInputText';
import RegisteredContainer from '../Containers/RegisteredContainer';
import {_renderAvatarHead} from '../Utils/ViewUtils';
import FoundData from '../data/FoundData';
import BottomShareView from '../Components/BottomShareView';
import ImageViewer from './ImageViewer';
import Global from '../Commom/GlobalConst';

let width = Global.Const.size.width;
import FoundAPIService from "../Commom/FoundAPIService";
import DateUtil from "../Commom/DateUtil";
const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    contentRow: {
        padding: 10,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        borderBottomColor: '#F2F3F5',
        borderBottomWidth: 1,
    },
    contentImageRow: {
        padding: 10,
        backgroundColor: 'white',
        flexDirection: 'row',
        alignItems: 'center',
        borderBottomColor: '#F2F3F5',
        borderBottomWidth: 1,
    },
    borderLine: {
        marginTop: 15,
    },
    imgStyle: {
        width: (width - 40) / 4,
        height: (width - 40) / 4,
        marginRight: 5,
    },
    fontSize12: {
        fontSize: 12,
        color: Global.FontColor.LightGrey,
    },
    fontSize16: {
        fontSize: 16,
        color: Global.FontColor.DimGray,
        lineHeight: 28
    }
});

/**
 * 约伴详情
 */
class WithTogetherDetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            paddingBottom: new Animated.Value(0),
            data: {},
            commentList: []
        };
    }

    componentDidMount() {
        let id = this.props.ID;
        console.log(id);
        FoundAPIService.datingPartnerDetails(id).then((ret)=> {
            this.setState({
                data: ret,
                commentList: ret.commemt_list,
            });
        }).catch((err)=> {

        });
    }
    refreshComments(){
        let id = this.props.ID;
        FoundAPIService.datingPartnerDetails(id).then((ret)=> {
            this.setState({
                commentList: ret.commemt_list,
            });
        }).catch((err)=> {

        });
    }
    goBack() {
        this.props.navigator.pop();
    }

    _KeyboardDidShow(height) {
        Animated.timing(
            this.state.paddingBottom,
            {
                toValue: height,
                duration: 50,
            }
        ).start();
    }

    _KeyboardDidHide() {
        Animated.timing(
            this.state.paddingBottom,
            {
                toValue: 0,
                duration: 50,
            }
        ).start();
    }

    goToImageViewer(images) {
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: images
            }
        })
    }
    goLoginPage(){
        this.props.navigator.push({
            id: 'RegisteredContainer',
            component: RegisteredContainer,
            passProps: {},
        });
    }

    render() {
        var images = this.state.data.images;
        var set_off_date;
        var return_date;
        if (this.state.data.set_off_date != null) {
            set_off_date = DateUtil.date(this.state.data.set_off_date);
        }
        if (this.state.data.return_date != null) {
            return_date = DateUtil.date(this.state.data.return_date);
        }
        return (
            <Animated.View style={[styles.container, {paddingBottom: this.state.paddingBottom}]}>
                <ToolBar leftFunc={() => this.goBack()} title="约伴详情" rightFunc={() => {
                    this.shareView.showShareView();
                }}/>
                <ScrollView style={{
                    flex: 1,
                    backgroundColor: '#F2F3F5',
                }}>
                    {_renderAvatarHead(this.state.data)}
                    <View style={styles.borderLine}>
                        <View style={styles.contentRow}>
                            <View style={{
                                flex: 1,
                                justifyContent: 'space-around',
                                borderRightColor: '#F2F3F5',
                                borderRightWidth: 1,
                            }}>
                                <Text style={styles.fontSize12}>出发日</Text>
                                <Text style={styles.fontSize16}>{set_off_date}</Text>
                            </View>
                            <View style={{
                                flex: 1,
                                justifyContent: 'space-around',
                                paddingLeft: 10,
                            }}>
                                <Text style={styles.fontSize12}>返回日</Text>
                                <Text style={styles.fontSize16}>{return_date}</Text>
                            </View>
                        </View>
                        <View style={styles.contentRow}>
                            <Text style={styles.fontSize12}>目的地</Text>
                            <Text style={styles.fontSize16}>{this.state.data.departure}</Text>
                        </View>
                        <View style={styles.contentRow}>
                            <Text style={styles.fontSize12}>出发地</Text>
                            <Text style={styles.fontSize16}>{this.state.data.destination}</Text>
                        </View>
                    </View>
                    <View style={[styles.borderLine, {marginBottom: 15}]}>
                        <View style={[styles.contentRow,
                            {
                                flexDirection: 'column',
                                alignItems: 'flex-start',
                                borderBottomWidth: 0,
                            }]}>
                            <Text style={styles.fontSize12}>说明</Text>
                            <Text style={styles.fontSize16}>{this.state.data.content}</Text>
                        </View>
                        <View style={[styles.contentImageRow, {flexWrap: 'wrap'}]}>
                            {
                                images ?
                                    images.map((item, index) => {
                                        return (
                                            <TouchableOpacity key={'image' + index}
                                                              onPress={()=> this.goToImageViewer(images)}>
                                                <Image style={styles.imgStyle} source={{uri:item}}/>
                                            </TouchableOpacity>
                                        )
                                    })
                                    :
                                    null
                            }
                        </View>
                    </View>
                    {this.state.commentList.length > 0 ?
                        <View style={{flexDirection: 'row',alignItems: 'center',marginTop:10,padding: 10,paddingLeft: 15, backgroundColor: 'white',borderColor: '#F2F3F5',borderBottomWidth: 1,
                        }}>
                            <Image style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                   source={require('../../Image/icon_gray_comment.png')}
                            />
                            <Text style={{color: '#333', fontSize: 16}}>点评</Text>
                        </View>
                        : null}
                    {this.state.commentList.length > 0 ?
                        <FoundDetailsListView commentList={this.state.commentList}/>
                        : null}
                </ScrollView>
                <BottomInputText
                    keyboardDidHide={() => this._KeyboardDidHide()}
                    keyboardDidShow={(height) => this._KeyboardDidShow(height)}
                    id={this.props.ID}
                    goLoginPage={()=>this.goLoginPage()}
                    refreshComments={()=>this.refreshComments()}
                />
                <BottomShareView
                    shareTitle={ this.state.data.user_name}
                    shareContent={this.state.data.content}
                    shareImageUrl={this.state.data.avatar}
                    shareUrl={'https://www.pgyer.com/TuralTravel_IOS'}
                    ref={(ref) => {this.shareView = ref;}}/>
            </Animated.View>
        )
    }
}

export default WithTogetherDetail;